<template>
  <div class="container" :style="'height: ' + docheight + 'px'">
    <leftcont></leftcont>
    <div class="righCont">
      <topcont></topcont>
      <div class="content">
        <div class="mainCont">
          <div class="mainTop">
            <div class="mainTitle">订单详情</div>
            <btn value="返回列表" @click="backfn"></btn>
          </div>
          <div class="userInfo">
            <div class="userLeft">
              <div class="goodsCont">
                <div class="goodsImg">
                  <img :src="detailInfo.package_cover + ossSrc" />
                </div>
                <div class="goodsName">{{ detailInfo.package_name }}</div>
                <div class="goodsPrice">
                  <div class="priceText">¥{{ detailInfo.package_price }}</div>
                  <div>{{ detailInfo.package_time }}分钟</div>
                </div>
              </div>
            </div>
            <div class="userRight">
              <div class="userRightHead">订单信息</div>
              <div class="userRightInfo">
                <div class="infoItem">
                  <div class="infoName">订单编号:</div>
                  <div class="infoVal">{{ detailInfo.order_number }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">订单状态:</div>
                  <div class="infoVal">
                    <div class="blueBtn" v-if="detailInfo.order_status == 1">
                      待付款
                    </div>
                    <div class="blueBtn" v-if="detailInfo.order_status == 2">
                      待接单
                    </div>
                    <div class="blueBtn" v-if="detailInfo.order_status == 3">
                      待服务
                    </div>
                    <div class="greenBtn" v-if="detailInfo.order_status == 5">
                      已完成
                    </div>
                    <div class="blackBtn" v-if="detailInfo.order_status == 6">
                      已关闭
                    </div>
                    <div class="blackBtn" v-if="detailInfo.order_status == 7">
                      已退款
                    </div>
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">订单金额:</div>
                  <div class="infoVal">
                    {{ detailInfo.order_total_price }}(元)
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">交通费用:</div>
                  <div class="infoVal">{{ detailInfo.car_price }}(元)</div>
                </div>
                <div class="infoItem" v-if="detailInfo.num">
                  <div class="infoName">下单数量:</div>
                  <div class="infoVal">{{ detailInfo.num }}份</div>
                </div>
                <div class="infoItem" v-if="detailInfo.jz_num">
                  <div class="infoName">加钟数量:</div>
                  <div class="infoVal">{{ detailInfo.jz_num }}个钟</div>
                </div>
                <div class="infoItem" v-if="detailInfo.jz_num">
                  <div class="infoName">加钟费用:</div>
                  <div class="infoVal">¥{{ detailInfo.jz_money }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">技师姓名:</div>
                  <div class="infoVal">
                    <div class="blackBtn underText" @click="toTech">
                      {{ detailInfo.technician_nick_name }}
                    </div>
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">预约时间:</div>
                  <div class="infoVal">{{ detailInfo.service_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">创建时间:</div>
                  <div class="infoVal">{{ detailInfo.create_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">支付时间:</div>
                  <div class="infoVal">{{ detailInfo.order_pay_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">接单时间:</div>
                  <div class="infoVal">
                    {{ detailInfo.receiving_order_time }}
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">核销时间:</div>
                  <div class="infoVal">{{ detailInfo.check_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">退款时间:</div>
                  <div class="infoVal">{{ detailInfo.refund_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">退款金额:</div>
                  <div class="infoVal">{{ detailInfo.refund_money }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">退款原因:</div>
                  <div class="infoVal">{{ detailInfo.close_reason }}</div>
                </div>
                <div class="infoItem" v-if="detailInfo.service_remark || true">
                  <div class="infoName">订单备注:</div>
                  <div class="infoVal">{{ detailInfo.service_remark }}</div>
                </div>
              </div>
              <div class="userRightHead hasMargin">客户信息</div>
              <div class="userRightInfo">
                <div class="infoItem">
                  <div class="infoName">客户姓名:</div>
                  <div class="infoVal">{{ detailInfo.user_name }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">客户电话:</div>
                  <div class="infoVal">{{ detailInfo.user_phone }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">服务地址:</div>
                  <div class="infoVal">
                    {{ detailInfo.service_address
                    }}{{ detailInfo.house_number }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftcont from "@/components/leftCont.vue";
import topcont from "@/components/topCont.vue";
import btn from "@/components/public/btn.vue";
import { orderDetails } from "@/http/api";

export default {
  components: { leftcont, topcont, btn },
  data() {
    return {
      input: "",
      value: "",
      status: [],
      detailInfo: {}
    };
  },
  props: {},
  methods: {
    toTech() {
      this.$router.push({
        path: "/techDetail",
        query: { id: this.detailInfo.technician_id }
      });
    },
    backfn() {
      this.$router.back();
    },
    getdata() {
      var data = {
        order_id: this.$route.query.id
      };
      orderDetails(data)
        .then(res => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data;
          } else {
            this.$message(res.data.code);
          }
        })
        .catch(err => {
          this.$message("服务器请求超时");
        });
    }
  },
  mounted() {},
  created() {
    this.getdata();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  display: flex;
  overflow: hidden;
  .righCont {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #f4f8ff;
    .content {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .mainCont {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        .blueBtn {
          color: #96a1fe;
        }
        .redBtn {
          color: #f56c6c;
        }
        .greenBtn {
          color: #85ce61;
        }
        .blackBtn {
          color: #666;
        }
        .underText {
          cursor: pointer;
          text-decoration: underline;
        }
        .mainTop {
          display: flex;
          margin-bottom: 25px;
          align-items: center;
          justify-content: space-between;
          .mainTitle {
            font-size: 14px;
            font-weight: bold;
          }
        }
        .userInfo {
          width: 100%;
          padding: 30px;
          margin-bottom: 30px;
          display: flex;
          background-color: #eff2fe;
          box-sizing: border-box;
          .userLeft {
            .goodsCont {
              background-color: #fff;
              padding: 10px;
              box-sizing: border-box;
              .goodsImg {
                width: 200px;
                height: 200px;
                img {
                  width: 100%;
                }
              }
              .goodsName {
                width: 200px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size: 14px;
                padding: 5px 0 5px;
                font-weight: bold;
              }
              .goodsTag {
                font-size: 12px;
                color: #666;
              }
              .goodsPrice {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                color: #666;
                margin-top: 10px;
                align-items: center;
                .priceText {
                  color: #4fc763;
                  font-size: 20px;
                }
              }
            }
            .shopStatus {
              text-align: center;
            }
          }
          .userRight {
            width: 200px;
            flex: 1;
            margin-left: 15px;
            box-sizing: border-box;
            padding: 0 15px;
            .userRightHead {
              font-size: 15px;
              font-weight: bold;
            }
            .hasMargin {
              margin-top: 20px;
            }
            .userRightInfo {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              .infoItem {
                width: 48%;
                margin: 10px 0px;
                display: flex;
                line-height: 20px;
                font-size: 14px;
                .infoName {
                  width: 60px;
                  text-align: left;
                  margin-right: 15px;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
